<template>
  <render></render>
</template>
<script lang="ts" setup>
import { VNode, h } from 'vue'

const createWordElement = (list?: string[], style?: Object, words?: string) => {
  let i: VNode | null = null
  let tagList: string[] = list?.length ? list : ['span']
  let text: string | undefined = words || undefined
  while (tagList.length) {
    let tag = tagList.pop()!
    if (i) {
      i = h(tag, tagList.length ? {} : { style }, [i])
    } else if (!tagList.length) {
      i = h(tag, { style }, text)
    } else {
      i = h(tag, {}, text)
    }
  }
  return i
}

const render = (props: any) => {
  const { words, color, font_size, style } = props.data
  const { bold, italic, strikethrough, underline } = style || {}
  const list: string[] = []
  bold && list.push('strong')
  strikethrough && list.push('s')
  underline && list.push('u')
  italic && list.push('em')
  !list.length && list.push('span')
  return createWordElement(list, { color }, words)
}
</script>
<style lang="scss"></style>
